<?php 
$_options = array(
	'name'	=>	'default'
);
if (isset($settings)) {
	$_options = am($_options, $settings);
}
?>
<style>
ul#<?php echo $_options['name']?>_related_image_list li.image_item {
    border: 1px solid #EEEEEE;
    float: left;
    height: 200px;
    margin: 7px;
    text-align: center;
    width: 190px;
}
ul#<?php echo $_options['name']?>_related_image_list li.image_item img {
	max-width: 190px;
	max-height: 117px;
}
div#related_images_dialogs {
	display:none;
}

div.cake_form{margin:10px 0}

div.cake_form form fieldset{
    border: 1px solid #999999;
    padding:15px;
}
div.cake_form form fieldset legend {
    background: none repeat scroll 0 0 #EFEFEF;
    border: 1px solid #999999;
    font-weight: bold;
    padding: 6px 40px 6px 10px;
}

div.cake_form form fieldset ul#<?php echo $_options['name']?>_related_image_list{padding: 10px 0;}
div.cake_form form fieldset p.upload_image_link1{
    clear:both; padding-top: 20px;
}
div.cake_form form label {
    display: block;
    float: left;
    width: 120px;
}

div.cake_form ul#<?php echo $_options['name']?>_related_image_list li.image_item label{width: 190px;}

form#<?php echo $_options['name']?>_upload_related_image, #RelatedImageEditForm{padding:0 10px;}

input#<?php echo $_options['name']?>_add_related_image_title, input#edit_image_title{width: 200px;}

form#<?php echo $_options['name']?>_upload_related_image fieldset.image_set, #RelatedImageEditForm fieldset.image_set{margin:10px 0;}

form#<?php echo $_options['name']?>_upload_related_image fieldset.image_set label, #RelatedImageEditForm fieldset.image_set label{width: 104px;}

form#<?php echo $_options['name']?>_upload_related_image .submit, #RelatedImageEditForm .submit{padding-left: 119px; margin-top: 5px;}

.list-table .faked-file {position: inherit !important;}

</style>
<script language="javascript">
$(document).ready(function() {
	upload_image_div = $('div#<?php echo $_options['name']?>_upload_image_div');
	edit_image_div = $('div#<?php echo $_options['name']?>_edit_image_div');
	
	upload_image_div.dialog({
		resizable: false,
		modal: true,
		width: 650,
		autoOpen: false
	});
	edit_image_div.dialog({
		resizable: false,
		modal: true,
		width: 650,
		autoOpen: false
	});

	$('p.upload_image_link1 > a').click(function() {
		upload_image_div.dialog('open');
	});

	// Make upload image form as Ajax
	$('#<?php echo $_options['name']?>_upload_related_image div.submit input').click(function() {
		$.ajaxFileUpload({
			url:"<?php echo $html->url(
				array(
					'plugin'		=>	'related_images',
					'controller'	=>	'manage',
					'action'		=>	'ajax_upload_image',
				)
			)?>/title:"+encodeURIComponent($('#<?php echo $_options['name']?>_add_related_image_title').val())+"/description:"+encodeURIComponent($('#<?php echo $_options['name']?>_add_related_image_description').val())+"/id:<?php echo $this->data[$_options['model']]['id']?>/model:<?php echo $_options['model']?>/configFile:<?php echo $_options['configFile'];?>",
			secureuri:false,
			fileElementId:'<?php echo $_options['name']?>_add_field_image',
			dataType: 'text',
			success: function (data, status) {
				if (data.substring(0,6) == "Error:") {
					// Display Error Message
					alert(data.substring(7));
				} else {
					alert("<?php __("Hình ảnh đã được upload thành công!")?>");
                    
                    // Trong trường hợp hình upload là đầu tiên thì cần phải xóa thông báo "Hiện chưa có hình nào"
                    // Tìm khối thông báo
                    var message_block = $('ul#<?php echo $_options['name']?>_related_image_list > span');
                    if (message_block.length) {
                        message_block.remove();
                    }
                    
					var block = $(data)
					$('ul#<?php echo $_options['name']?>_related_image_list').append(block);

					// Add sự kiện cho link delete
					block.find('a.delete_image').click(function() {
						<?php echo $_options['name']?>_addDeleteImageLinkListener(this);
						return false;
					});
					// Add sự kiện cho link edit
					block.find('a.edit_image').click(function() {
						<?php echo $_options['name']?>_addEditImageLinkListender(this);
						return false;
					});
					
					$('form#<?php echo $_options['name']?>_upload_related_image').resetForm();
					
					upload_image_div.dialog('close');
				}
			},
			error: function (data, status, e)
			{
				alert(e);
			}
		});
		return false;
	});

	// Add Ajax cho các link delete image
	$('ul#<?php echo $_options['name']?>_related_image_list a.delete_image').click(
		function() {
			<?php echo $_options['name']?>_addDeleteImageLinkListener(this);
			return false;
		}
	);

	// Add Ajax cho các link edit image
	$('ul#<?php echo $_options['name']?>_related_image_list a.edit_image').click(
		function() {
			<?php echo $_options['name']?>_addEditImageLinkListender(this);
			return false;
		}
	);
});

function <?php echo $_options['name']?>_addDeleteImageLinkListener(theLink) {
	if (confirm("<?php __("Bạn có thật sự muốn xóa hình này?")?>")) {
		var parent_div = $(theLink).parent().parent();
		var image_id = parent_div.attr('image_id');
		$.ajax({
			dataType: 'json',
			url: "<?php echo $html->url(array('plugin'=>'related_images', 'controller'=>'manage', 'action'=>'ajax_delete_image'))?>/image_id:"+image_id+"/configFile:<?php echo $_options['configFile'];?>",
			success: function(responseData) {
				alert(responseData.message);
				if (responseData.error != "1") {
					parent_div.remove();
				}
                // Trong trường hợp xóa hết hình thì phải hiện thông báo "Hiện chưa có hình nào"
                var message = '<span class="message"><?php __("Hiện chưa có hình nào.")?></span>';
                if ($.trim($('#<?php echo $_options['name']?>_related_image_list').html())=="") {
                    $('#<?php echo $_options['name']?>_related_image_list').append(message);
                }
			}
		});
	}
}

function <?php echo $_options['name']?>_addEditImageLinkListender(theLink) {
	var parent_div = $(theLink).parent().parent();
	var image_id = parent_div.attr('image_id');
	$.ajax({
		dataType: 'text',
		url: "<?php echo $html->url(array('plugin'=>'related_images','controller'=>'manage', 'action'=>'edit'))?>/image_id:"+image_id+"/configFile:<?php echo $_options['configFile'];?>",
		success: function(responseData) {
			edit_image_div.html(responseData);
			edit_image_div.dialog('open');
			<?php echo $_options['name']?>_setAjaxUpload(image_id);
		}
	});
}

function <?php echo $_options['name']?>_setAjaxUpload(image_id) {
	$('form#RelatedImageEditForm div.submit input[type="submit"]').click(function() {
		$.ajaxFileUpload({
			url:"<?php echo $html->url(
				array(
					'plugin'		=>	'related_images',
					'controller'	=>	'manage',
					'action'		=>	'edit',
				)
			)?>/title:"+encodeURIComponent($('#edit_image_title').val())+"/description:"+encodeURIComponent($('#edit_image_description').val())+"/image_id:"+image_id+"/configFile:<?php echo $_options['configFile'];?>",
			secureuri:false,
			fileElementId:'field_edit_image',
			dataType: 'text',
			success: function (data, status) {
				if (data.substring(0,6) == "Error:") {
					// Display Error Message
					alert(data.substring(7));
				} else {
					alert("<?php __("Hình ảnh đã được cập nhật thành công!")?>");
					var block = $(data);

					var old_block = $('ul#<?php echo $_options['name']?>_related_image_list li[image_id="'+image_id+'"]');
					old_block.html(block.html());

					// Add sự kiện cho link delete
					old_block.find('a.delete_image').click(function() {
						<?php echo $_options['name']?>_addDeleteImageLinkListener(this);
						return false;
					});
					// Add sự kiện cho link edit
					old_block.find('a.edit_image').click(function() {
						<?php echo $_options['name']?>_addEditImageLinkListender(this);
						return false;
					});

					// Reset Form
					$('form#RelatedImageEditForm').resetForm();
					
					edit_image_div.dialog('close');
				}
			},
			error: function (data, status, e)
			{
				alert(e);
			}
		});
		return false;
	});
}
</script>
<div class='cake_form'>
<?php echo $form->create('RelatedImage', array(
	'url'	=> array(
        'plugin'       =>  'related_images',
		//'controller'	=>	$this->params['controller'],
        'controller'	=>	'manage_related_images',
		'action'		=>	'update_priority'
	),
	'class'	=> 'form'
));?>
<fieldset>
	<legend><?php __("Các hình liên quan:")?></legend>
	<ul id='<?php echo $_options['name']?>_related_image_list'>
		<?php if (!isset($related_images) || !count($related_images)):?>
		<span class='message'><?php __("Hiện chưa có hình nào.")?></span>
		<?php else:?>
		<?php foreach ($this->data['RelatedImage'] as $image):?>
		<?php echo $this->element('manage_image_item', array('plugin'=>'related_images','image'=> $image));?>
		<?php endforeach;?>
		<?php endif;?>
	</ul>
	<p class='upload_image_link1' align='right'>
        <?php if ((count($related_images))!=0){?>
        <input class='button1' type='submit' value='<?php echo __("Cập nhật độ ưu tiên");?>'/>
        <?php }?>
		<a href='javascript:void(0)' class="new" id='<?php echo $_options['name']?>_upload_related_image_link'><input class='button1' type='button' value='<?php echo __("Thêm mới");?>'/></a></div>
	</p>
</fieldset>
</form>
</div>

